<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>图书管理系统</title>
        <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
        <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
        <link rel="shortcut icon" href="favicon.ico">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/font-awesome.min.css" rel="stylesheet">
        <link href="css/animate.min.css" rel="stylesheet">
        <link href="css/style.min.css" rel="stylesheet">
        <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
        <style type="text/css">
            .col-sm-3 {
                width: 118px;
            }
        </style>
    </head>
    <body class="gray-bg">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row table_box" id="main">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>添加会员</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="form_basic.html#">选项1</a>
                                </li>
                                <li><a href="form_basic.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link" href="javascript:window.location.replace('admin.html');">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <form class="form-horizontal m-t" id="signupForm">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">账号：</label>
                                <div class="col-sm-8">
                                    <input id="username" name="username" class="form-control" type="text" v-model="dataForm.Name">
                                </div>
                            </div>
                            <div class="form-group" v-if="editID">
                                <label class="col-sm-3 control-label">原密码：</label>
                                <div class="col-sm-8">
                                    <input :id="pwdOriginal" :name="pwdOriginal" class="form-control" type="password" v-model="dataForm.passwordOriginal">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">{{editID ? '新密码：' :'密码：'}}</label>
                                <div class="col-sm-8">
                                    <input :id="pwd" :name="pwd" class="form-control" type="password" v-model="dataForm.Password">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">确认密码：</label>
                                <div class="col-sm-8">
                                    <input :id="pwdConfirm" :name="pwdConfirm" class="form-control" type="password" v-model="dataForm.PasswordConfirm">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-8 col-sm-offset-3">
                                    <button class="btn btn-primary" type="submit">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/content.min.js"></script>
        <script src="js/plugins/validate/jquery.validate.min.js"></script>
        <script src="js/plugins/validate/messages_zh.min.js"></script>
        <script src="js/demo/form-validate-demo.min.js"></script>
        <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
        <script src="js/pack.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            data: {
                dataForm: {
                    Name: '',
                    Password: '',
                    PasswordConfirm: '',
                    passwordOriginal: ''
                },
                editID: ''
            },
            computed: {
                pwdOriginal() {
                    return (this.editID && this.dataForm.passwordOriginal) ? 'passwordOriginal' : this.editID ? 'passwordOriginal2': 'passwordOriginal';
                },
                pwd() {
                    return (this.editID && this.dataForm.passwordOriginal) ? 'password' : this.editID ? 'password2': 'password';
                },
                pwdConfirm() {
                    return (this.editID && this.dataForm.passwordOriginal) ? 'confirm_password' : this.editID ? 'confirm_password2': 'confirm_password';
                }
            },
            mounted () {
                var e = "<i class='fa fa-times-circle'></i> ";
                $("#signupForm").validate({
                    rules: {
                        username: { required: !0, minlength: 2 }, passwordOriginal: { required: !0, minlength: 6 }, password: { required: !0, minlength: 6 }, confirm_password: { required: !0, minlength: 6, equalTo: "#password" }, email: { required: !0, email: !0 }
                        , topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required"
                    }, messages: {
                        username: {
                            required: e + "请输入您的用户名",
                            minlength: e + "用户名必须两个字符以上"
                        },
                        passwordOriginal: { required: e + "请输入原密码", minlength: e + "密码必须6个字符以上" },
                        password: { required: e + "请输入您的密码", minlength: e + "密码必须6个字符以上" },
                        confirm_password: { required: e + "请再次输入密码", minlength: e + "密码必须6个字符以上", equalTo: e + "两次输入的密码不一致" },
                    },
                    submitHandler:  (form) => {
                        this.saveData();
                    },
                    invalidHandler: (form, validator) => {
                        return false;
                    }
                });

                this.editID = pack.getQueryString('id');
                if (this.editID) {
                    pack.http('GET', 'http://localhost:7002/v1/admin/getAdmin', { Id: this.editID }, (res, err) => {
                        const result = res.results;
                        result.passwordOriginal = '';
                        result.PasswordConfirm = result.Password;
                        this.dataForm = result;
                    });
                }
            },
            methods: {
                saveData () {
                    if (this.editID) {
                        pack.http('POST', 'http://localhost:7002/v1/admin/editAdmin', this.dataForm, (res, err) => {
                            swal("修改成功", "", "success");
                        });
                    } else {
                        var data = Object.assign({}, this.dataForm);
                        delete data.passwordOriginal;
                        pack.http('PUT', 'http://localhost:7002/v1/admin/addAdmin', data, (res, err) => {
                            swal("添加成功", "", "success");
                        });
                    }
                }
            }
        }).$mount("#main");
    </script>
</html>